<template>
  <vue-form v-bind="searchFormConfig" v-model="formData">
    <template #footer>
      <div class="btns">
        <el-button @click="handleResetClick">重置</el-button>
        <el-button type="primary" @click="hanldeSearchClick">查询</el-button>
      </div>
    </template>
  </vue-form>
</template>

<script lang="ts">
import { defineComponent, ref, reactive } from "vue";
import VueForm from "@/base-ui/form";
export default defineComponent({
  components: { VueForm },
  props: {
    searchFormConfig: {
      type: Object,
      required: true,
    },
  },
  emits: ["resetBtnClick", "searchBtnClick"],
  setup(props, { emit }) {
    // 绑定的属性应该根据配置文件的 field 来设置
    const formItems = props.searchFormConfig.formItems ?? [];
    const originalData: any = {};
    for (const item of formItems) {
      originalData[item.field] = "";
    }
    const formData = ref(originalData);
    // 重置
    const handleResetClick = () => {
      // formData.value = "";
      for (const key in originalData) {
        formData.value[`${key}`] = originalData[key];
      }
      // Object.keys(originalData).forEach((key: any) => {
      //   formData.value[`${key}`] = originalData[key];
      // });

      // 发送 重置请求
      emit("resetBtnClick");
    };

    // 查询
    const hanldeSearchClick = () => {
      emit("searchBtnClick", formData.value);
    };
    return {
      formData,
      handleResetClick,
      hanldeSearchClick,
    };
  },
});
</script>

<style lang="less" scoped>
.btns {
  text-align: right;
  padding: 0 50px 20px 0;
}
</style>
